<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  表单弹窗
 * @desc
 -->
<template>
  <div class="align-center">
    <el-popover placement="bottom" v-model:visible="visiblePop" :width="200" trigger="click">
      <template #reference>
        <div class="flex justify-center" style="width: 15.5rem">
          <el-input prefix-icon="el-icon-search" v-model="value" style="width: 12.5rem" :placeholder="placeholder"></el-input>
          <div>
            <el-button class="margin-left-sm" type="primary" size="mini" @click="visiblePop=false" round>立即选择</el-button>
          </div>
        </div>
      </template>
      <el-tree :data="list" :props="{children: 'childs',label: 'name'}" default-expand-all @node-click="handleNodeClick">
      </el-tree>
    </el-popover>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    ref,
    onMounted,
    watch
  } from 'vue';
  import {
    useStore
  } from "vuex";
  export default defineComponent({
    name: 'selectTree',
    props: {
      value: String,
      list: Array,
      placeholder: String
    },
    emits: ['onchange'],
    setup(props, {
      emit
    }) {
      //vuex
      const store = useStore();
      //定义data
      const data = reactive(props);
      const visiblePop = ref(true);

      function handleNodeClick(value: any) {
        console.log(value);
        visiblePop.value = false;
        emit('onchange', value);
      }
      //监听全选变化
      // watch(visiblePop, (value: any) => {
      //   visiblePop.value = true;
      // })
      onMounted(() => {
        visiblePop.value = true;
      })
      //包装参数列表
      const refData = toRefs(data);
      return {
        ...refData,
        visiblePop,
        handleNodeClick
      }
    },
    methods: {
      submitForm(formName: string) {
        let ref: any = this.$refs[formName];
        ref.validate((valid: string) => {
          if (valid) {
            this.handleNodeClick(undefined);
          } else {
            return false;
          }
        });
      },
      resetForm(formName: string) {
        let ref: any = this.$refs[formName];
        ref.resetFields();
        this.handleNodeClick(undefined);
      }
    }
  })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
